:root {
    --bg-color: #1a1a2e; --card-bg: #2a2a4a; --text-color: #e0e0e0;
    --primary-color: #5a5acb; --secondary-color: #00e676; --danger-color: #ff4d4d;
    --border-color: #4a4a6b; --font-main: 'Roboto', sans-serif;
}
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

body, html { font-family: var(--font-main); background-color: var(--bg-color); color: var(--text-color); margin: 0; height: 100%; overflow: hidden; }
#app { display: flex; height: 100%; }

.sidebar { width: 220px; background: var(--card-bg); padding-top: 20px; flex-shrink: 0; border-right: 1px solid var(--border-color); }
.sidebar h2 { color: var(--primary-color); text-align: center; margin-bottom: 30px; font-size: 1.5em; }
.sidebar nav ul { list-style: none; padding: 0; margin: 0; }
.sidebar nav a { display: block; padding: 15px 25px; color: var(--text-color); text-decoration: none; transition: all 0.3s ease; border-left: 4px solid transparent; }
.sidebar nav a:hover, .sidebar nav a.router-link-exact-active { background-color: rgba(90, 90, 203, 0.2); border-left-color: var(--primary-color); color: white; font-weight: bold; }

.main-content { flex-grow: 1; padding: 30px; overflow-y: auto; display: flex; flex-direction: column; }

.card { background: var(--card-bg); padding: 25px; border-radius: 8px; border: 1px solid var(--border-color); }
.card h3 { margin-top: 0; color: var(--primary-color); border-bottom: 1px solid var(--border-color); padding-bottom: 10px; margin-bottom: 20px; }

button { background: var(--primary-color); color: white; border: none; padding: 8px 15px; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; font-weight: bold; }
button:hover { background: #4a4acb; }
input { background: #1a1a2e; border: 1px solid var(--border-color); color: white; padding: 8px 12px; border-radius: 5px; width: 100%; box-sizing: border-box; }
